<template>
  <!--主站组件-->
  <div id="container">
    <!--网页的头部导航栏-->
    <HeaderC/>
    <Affix :offset-top="400">
      <span class="demo-affix" @click="toFB">反<br>馈</span>
    </Affix>
    <div v-if="feedback" class="fd">
      <Input type="textarea" v-model="content" size="small" rows="5" placeholder="请输入反馈信息" style="width:400px;"></Input>
      <div style="justify-content: space-between;">
        <Button @click="clear">清空</Button><Button @click="send">提交</Button>
      </div>
    </div>
    <div id="content">
      <router-view/>
    </div>
    <div id="footer">

    </div>
  </div>

</template>

<script>
import HeaderC from "./HeaderC";
export default {
  name: "Home",
  components: {HeaderC},
  data(){
    return{
      feedback:false,
      content:''
    }
  },
  methods:{
    toFB(){
      this.feedback = true
    },
    clear(){
      this.content=''
    },
    send(){
      let params = new URLSearchParams();
      params.append('feedbackerId',sessionStorage.getItem("userId"));
      params.append('handleContent', this.content);
      this.$http.post('/api/user/feedback',params).then(res=>{
        console.log(res)
      }).catch(error=>{
        console.log(error)
      })
    }
  }
}
</script>

<style scoped>

#container{
  display:flex;
  flex-direction:column;
  padding:0;
  margin:0;
}

#content{

}

HeaderC{
  width:100%;
}

.demo-affix{
  position:absolute;
  left:3%;
  width:30px;
  height:60px;
  text-align:center;
  justify-content: center;
}
.demo-affix:hover{
  background-color: blue;
  color:white;
}
.fd{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.5);
  z-index: 1000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content: center;
}



</style>
